<template>
  <el-row style="margin-bottom:30px;background-color: #fff;border: 1px solid #eee;">
    <!-- <h1>HMarket</h1> -->
    <el-col :span="12">
      <div class="h-bd hmarket-bd row1-col1">
        <!-- 参考Params.vue 页面一加载就渲染出数据。此处是否需要作用域插槽 -->
        <!-- 鼠标放到导航栏上，获取当前索引/id,根据它显示对应内容current -->
        <el-tabs type="border-card">
          <el-tab-pane label="A股">
            <!-- 首页行情概览外层tab切换栏 -->
            <el-radio-group v-model="tabPosition"></el-radio-group>

            <!-- 首页行情概览里层tab切换栏 -->
            <el-tabs :tab-position="tabPosition" style="padding:0 0 20px">
              <el-tab-pane label="上证指数" class="hmarket-content clearfix">
                <!-- 里层tab栏内容：数据+echarts -->
                <div class="hmarket-area">
                  <!-- <a href="http://quotes.money.163.com/stock">
                    <p class="stock_index    upFontColor" _ntesquote_="code:0000001;attr:price;fixed:2;color:updown;bgchg:price">2822.44</p>
                    <p class="hmarket-echarts">
                      <span class="stock_price    upFontColor" _ntesquote_="code:0000001;attr:updown;fixed:2;color:updown;bgchg:price">12.42</span>
                      <span class="stock_percent    upFontColor" _ntesquote_="code:0000001;attr:percent;percent:2;color:updown;bgchg:price">0.44%</span>
                      <span class="stock_deal    upFontColor" _ntesquote_="code:0000001;attr:turnover;fmt:turnover-cut;color:updown">2227.20亿</span>
                    </p>
                  </a>-->
                  <!-- <a href="http://quotes.money.163.com/stock"> -->
                  <a href="http://localhost:8080/#/market/market/0000001">
                    <div class="point-info stock-up hmarket-point">
                      <div class="price">
                        {{($store.state.szzsData.price).toFixed(2)}}
                        <span
                          v-if="$store.state.szzsData.percent>0"
                        >
                          <i class="el-icon-top"></i>
                        </span>
                        <span v-else-if="$store.state.szzsData.percent<0">
                          <i class="el-icon-bottom"></i>
                        </span>
                      </div>
                      <div class="percent">
                        <span
                          class="text-left"
                          v-if="$store.state.szzsData.updown>0"
                        >{{'+'+($store.state.szzsData.updown).toFixed(2)}}</span>
                        <span class="text-left" v-else>{{($store.state.szzsData.updown).toFixed(2)}}</span>
                        <span
                          class="text-center"
                          v-if="$store.state.szzsData.percent>0"
                        >{{'+'+($store.state.szzsData.percent*100).toFixed(2)+'%'}}</span>
                        <span class="text-left" v-else>{{$store.state.szzsData.percent}}</span>
                        <span
                          class="text-right"
                        >{{($store.state.szzsData.turnover/100000000).toFixed(2)+"亿"}}</span>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="stock_chart">
                  <a href="http://localhost:8080/#/market/hsindex/szzs">
                    <img
                      src="http://img1.money.126.net/chart/hs/time/210x140/0000001.png?{$VERSION}"
                      :alt="$store.state.szzsData.name"
                    />
                  </a>
                </div>
              </el-tab-pane>

              <el-tab-pane label="深证成指" class="hmarket-content clearfix">
                <!-- 里层tab栏内容：数据+echarts -->
                <div class="hmarket-area">
                  <a href="http://localhost:8080/#/market/market/1399001">
                    <div class="point-info stock-up hmarket-point">
                      <div class="price">
                        {{($store.state.szczData.price).toFixed(2)}}
                        <span
                          v-if="$store.state.szczData.percent>0"
                        >
                          <i class="el-icon-top"></i>
                        </span>
                        <span v-else-if="$store.state.szczData.percent<0">
                          <i class="el-icon-bottom"></i>
                        </span>
                      </div>
                      <div class="percent">
                        <span
                          class="text-left"
                          v-if="$store.state.szczData.updown>0"
                        >{{'+'+($store.state.szczData.updown).toFixed(2)}}</span>
                        <span class="text-left" v-else>{{($store.state.szczData.updown).toFixed(2)}}</span>
                        <span
                          class="text-center"
                          v-if="$store.state.szczData.percent>0"
                        >{{'+'+($store.state.szczData.percent*100).toFixed(2)+'%'}}</span>
                        <span class="text-left" v-else>{{$store.state.szczData.percent}}</span>
                        <span
                          class="text-right"
                        >{{($store.state.szczData.turnover/100000000).toFixed(2)+"亿"}}</span>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="stock_chart">
                  <a href="http://localhost:8080/#/market/hsindex/szcz">
                    <img
                      src="http://img1.money.126.net/chart/hs/time/210x140/1399001.png?{$VERSION}"
                      :alt="$store.state.szczData.name"
                    />
                  </a>
                </div>
              </el-tab-pane>

              <el-tab-pane label="沪深300" class="hmarket-content clearfix">
                <!-- 里层tab栏内容：数据+echarts -->
                <div class="hmarket-area">
                  <a href="http://localhost:8080/#/market/market/1399300">
                    <div class="point-info stock-up hmarket-point">
                      <div class="price">
                        {{($store.state.hs300Data.price).toFixed(2)}}
                        <span
                          v-if="$store.state.hs300Data.percent>0"
                        >
                          <i class="el-icon-top"></i>
                        </span>
                        <span v-else-if="$store.state.hs300Data.percent<0">
                          <i class="el-icon-bottom"></i>
                        </span>
                      </div>
                      <div class="percent">
                        <span
                          class="text-left"
                          v-if="$store.state.hs300Data.updown>0"
                        >{{'+'+($store.state.hs300Data.updown).toFixed(2)}}</span>
                        <span
                          class="text-left"
                          v-else
                        >{{($store.state.hs300Data.updown).toFixed(2)}}</span>
                        <span
                          class="text-center"
                          v-if="$store.state.hs300Data.percent>0"
                        >{{'+'+($store.state.hs300Data.percent*100).toFixed(2)+'%'}}</span>
                        <span class="text-left" v-else>{{$store.state.hs300Data.percent}}</span>
                        <span
                          class="text-right"
                        >{{($store.state.hs300Data.turnover/100000000).toFixed(2)+"亿"}}</span>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="stock_chart">
                  <a href="http://localhost:8080/#/market/hsindex/hs300">
                    <img
                      src="http://img1.money.126.net/chart/hs/time/210x140/1399300.png?{$VERSION}"
                      :alt="$store.state.hs300Data.name"
                    />
                  </a>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="港股">
            <el-radio-group v-model="tabPosition">
              <!-- <el-radio-button label="left">A股</el-radio-button> -->
            </el-radio-group>

            <!-- 首页行情概览里层tab切换栏 -->
            <el-tabs
              :tab-position="tabPosition"
              style="padding:0 0 20px"
              v-model="fundActiveName"
              @tab-click="fundHandleClick"
            >
              <el-tab-pane label="沪市基指" class="hmarket-content clearfix" name="0000011">
                <!-- 里层tab栏内容：数据+echarts -->
                <div class="hmarket-area">
                  <a href="http://localhost:8080/#/market/hsindex/szzs">
                    <div class="point-info stock-up hmarket-point">
                      <div class="price">
                        {{($store.state.szzsData.price).toFixed(2)}}
                        <span
                          v-if="$store.state.szzsData.percent>0"
                        >
                          <i class="el-icon-top"></i>
                        </span>
                        <span v-else-if="$store.state.szzsData.percent<0">
                          <i class="el-icon-bottom"></i>
                        </span>
                      </div>
                      <div class="percent">
                        <span
                          class="text-left"
                          v-if="$store.state.szzsData.updown>0"
                        >{{'+'+($store.state.szzsData.updown).toFixed(2)}}</span>
                        <span class="text-left" v-else>{{($store.state.szzsData.updown).toFixed(2)}}</span>
                        <span
                          class="text-center"
                          v-if="$store.state.szzsData.percent>0"
                        >{{'+'+($store.state.szzsData.percent*100).toFixed(2)+'%'}}</span>
                        <span class="text-left" v-else>{{$store.state.szzsData.percent}}</span>
                        <span
                          class="text-right"
                        >{{($store.state.szzsData.turnover/100000000).toFixed(2)+"亿"}}</span>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="stock_chart">
                  <a href="http://localhost:8080/#/market/hsindex/szzs">
                    <img
                      :src="['http://img1.money.126.net/chart/hs/time/210x140/'+$store.state.szzsData.code+'.png']"
                      :alt="$store.state.szzsData.name"
                    />
                  </a>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="基金"></el-tab-pane>
        </el-tabs>
      </div>
    </el-col>
    <el-col :span="12">
      <!-- <div class="h-bd hmarket-bd row1-col2"> -->
      <el-col :span="12">
        <div class="wy_box wy_left">
          <div class="logo_b">
            <a href="http://money.163.com/special/shangyejia/">
              <img
                src="http://cms-bucket.ws.126.net/2019/10/28/252560e31a5a4ca6810e2fb8dd2d9963.png"
              />
            </a>
          </div>
          <a href="https://money.163.com/20/0430/09/FBF0D4PJ00259E8J.html">网库集团董事长：现阶段复工复产的量还远不够</a>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="wy_box">
          <div class="logo_b">
            <a href="http://money.163.com/special/wangyiyanjiuju2017/">
              <img
                src="http://cms-bucket.nosdn.127.net/2018/11/23/4cd341f7ccda4550a8c58d63e9de1fed.png"
              />
            </a>
          </div>
          <a href="https://money.163.com/20/0430/09/FBEUSLH100258J1R.html">丁学良：美国不是"逆全球化" 美元将变得更加坚挺</a>
        </div>
      </el-col>
      <!-- </div> -->
    </el-col>
    <!-- 实时新闻横向列表，另建一个组件 -->
    <!-- <div class="latest_news">
      latest_news
    </div>-->
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      // activeName:'A'
      tabPosition: "left",
      fundActiveName: "0000011"
    };
  },
  methods: {
    fundHandleClick() {
      console.log(this.fundActiveName);
      /* if (this.fundActiveName == "0000011") {
        this.$store.dispatch("selectStock",this.fundActiveName);
      } */
    }
  },
  created() {
    this.$store.dispatch("getHSMain");
  }
};
</script>

<style>
.hmarket-bd .el-tabs--border-card {
  /* border: 1px solid #DCDFE6;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04); */
  border: 0;
  border-right: 1px solid #eee;
  box-shadow: none;
}
.hmarket-area {
  /* 有浮动子元素要防止父元素塌陷 */
  float: left;
  width: 250px;
  margin: 15px;
  text-align: center;
  line-height: 40px;
}
.wy_box {
  margin: 50px 20px 40px 30px;
}
.wy_box a {
  display: block;
  font-size: 18px;
  line-height: 26px;
  color: #444;
  margin-top: 8px;
}
.wy_left {
  border-right: 1px solid #eee;
  padding-right: 40px;
}
</style>
